<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gestopt met roken</title>
<style type="text/css">
@import "../css/jquery.countdown.css";

#utilnavbarid {
	font-family:Tahoma, Geneva, sans-serif;
	color:#39C;
	position: absolute;
	top: 0px;
	right: 10px;
	min-width:450px;
	height: 25px;
	margin-top: 0px;
	padding-top: 2px;
	text-align: right;
	/*background-color: #999;*/
	line-height: 20px;
}
#utilnavbarid p {
	margin:0px;
	padding:0px;
}

#userid {
	width: 900px;
	height: 100px;
	background-color: #993;
	position: absolute;
	z-index: 1000;
	top: 55px;
	left: 30px;
	/*font-family: Verdana, Geneva, sans-serif;*/
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 24px;
	color: #33C;
	padding-left: 20px;
}

#userid > h3 {
	font-size: 18px;
	line-height: 0.3em;
}

#allid {
	width: 500px;
	height: 100px;
	background-color:#CCC;
	position: absolute;
	z-index: 1000;
	top: 150px;
	left: 160px;
}


#secondsid {
	width: 240px;
	height: 65px;
	background-color:#3F0;
	position: absolute;
	z-index: 1000;
	top: 300px;
	left: 400px;
}
#minutesid {
	width: 240px;
	height: 65px;
	background-color:#F9C;
	position: absolute;
	z-index: 999;
	top: 350px;
	left: 600px;
}
#hoursid {
	width: 240px;
	height: 65px;
	background-color: #C93;
	position: absolute;
	z-index: 998;
	top: 405px;
	left: 500px;
}
#daysid {
	width: 240px;
	height: 65px;
	background-color: #F30;
	position: absolute;
	z-index: 998;
	top: 455px;
	left: 650px;
}
#weeksid {
	width: 240px;
	height: 65px;
	background-color: #36C;
	position: absolute;
	z-index: 998;
	top: 500px;
	left: 475px;
}
#monthsid {
	width: 240px;
	height: 65px;
	background-color: #FC6;
	position: absolute;
	z-index: 998;
	top: 530px;
	left: 310px;
}
#yearsid {
	width: 240px;
	height: 65px;
	background-color: #F60;
	position: absolute;
	z-index: 998;
	top: 490px;
	left: 160px;
}

.countdown_amount {
	font-size:300%;
 	
}

</style>




<style type="text/css">
<!--
.peukenclass {
	border-right-width: 2px;
	border-bottom-width: 3px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #999;
	border-bottom-color: #CCC;
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: #EAEAEA;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #666;
}





#peuken1id {
	overflow: hidden;
	position: absolute;
	left:50px;
	/*right:40px;*/
	top:50px;
	height: 335px;
}
#peuken2id {
	overflow: hidden;
	position: absolute;
	left:200px;
	/*right:20px;*/
	top:200px;
	height: 335px;
	z-index:100;

}
#peuken3id {
	overflow: hidden;
	position: absolute;
	left:100px;
	/*right:100px;*/
	top:500px;
	height: 335px;
	z-index:10;

}
body {
	background-color: #FFD595;
	margin:0px;
	padding:0px;

}
#holderid {
	overflow: hidden;
	height: 100%;
	width: 100%;
	position: absolute;
}
.countdown_section {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:18px;
	
}
.countdown_amount{
	font-size:36px;
	font-family: Tahoma, Geneva, sans-serif;	
}
#acknowledgementid {
	font-size:15px;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style:italic;
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 2000;
}
-->
</style>

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.countdown.js"></script>
<!--<script type="text/javascript" src="../js/jquery.countdown-nl.js"></script>-->

<script type="text/javascript">
//$.countdown.setDefaults($.countdown.regional['']);
var austDay = new Date();
austDay = new Date(1999, 10, 23, 14, 15);

$(function () {
	//var austDay = new Date();
	//austDay = new Date(1999, 10, 23);
	$('#allid').countdown({since: austDay, format: 'YOWDHMS'});
	$('#secondsid').countdown({since: austDay, format: 'S'});
	$('#minutesid').countdown({since: austDay, format: 'M'});
	$('#hoursid').countdown({since: austDay, format: 'H'});
	$('#daysid').countdown({since: austDay, format: 'D'});
	$('#weeksid').countdown({since: austDay, format: 'W'});	
	$('#monthsid').countdown({since: austDay, format: 'O'});	
	$('#yearsid').countdown({since: austDay, format: 'Y'});	
	//$('#year').text(austDay.getFullYear());
});
</script>

</head>

<body>
<!-- Hier zou  door python gemaakte functionaliteit moeten komen, voor noscript en linx-browsers, onzichtbaar onder normale omstandigheden -->
<div id="holderid" >
	<div class="peukenclass" id="peuken1id"><img src="../images/stophoestImages/peukenkl1.png" width="1301" height="335" alt="peuken plaatje" style="opacity:0.7;filter:alpha(opacity=70)"  /></div>
<div class="peukenclass" id="peuken2id"><img src="../images/stophoestImages/peukenkl2.png" width="1301" height="335" alt="peuken plaatje"  /></div>
<div class="peukenclass" id="peuken3id"><img src="../images/stophoestImages/peukenkl3.png" width="1301" height="335" alt="peuken plaatje" style="opacity:0.4;filter:alpha(opacity=40)"  /></div>
</div>
<div class="foregroundclass" id="userid" style="opacity:0.6;filter:alpha(opacity=60)" ><h3>Wouter van den Brink hasn't smoked since september 23, 1999, 14:15 h </h3><h4>so he hasn't smoked for</h4> </div>
<div class="foregroundclass" id="utilnavbarid" style="opacity:0.6;filter:alpha(opacity=60)" ><p>dummy utilities nav bar: 	 <span>Contact--Login--Help--Language</span></p></div>
<div class="foregroundclass" id="allid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="secondsid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="minutesid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="hoursid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="daysid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="weeksid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="monthsid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="yearsid" style="opacity:0.6;filter:alpha(opacity=60)" >Wouter is gestopt met roken</div>
<div class="foregroundclass" id="acknowledgementid" style="opacity:0.6;filter:alpha(opacity=60)" ><p>Web development by <a href="http://worldworld.org" title="Web development by worldworld.org, Wouter van den Brink" target="_blank">worldworld.org</a>. App Engine Consulting by  <a href="http://www.linkedin.com/profile?viewProfile=&key=3587666&trk=EML_nus_dig_conn-A20" title="Jan van der Meiden, App Engine Consultant" target="_blank">Jan van der Meiden</a>. Cigarette stubs photography by <a href="http://www.sxc.hu/profile/benedeki" title="profile of benedeki" target="_blank">benedeki</a>.   Counting with <a href="http://keith-wood.name/countdown.html" title="link to jQuery Qountdown plugin by Keith Wood" target="_blank">jQuery Qountdown plugin</a></p></div>

</body>
</html>
